<template>
  <!--<h1>首页</h1>-->
  <!--设置气泡卡片包容表单-->
  <el-card style="width: 100%;">
    <!--卡片标题-->
    <div class="card-header" style="margin-left: -90%;background-color: white;">
      <el-button color=orange :dark="isDark" plain>全局配置</el-button>
    </div>
    <!--灰色分割线-->
    <el-divider style="margin-top: 0;padding-top: 5px;height: 10px;"/>
    <!--卡片中表单部分-->
    <el-form :label-position="labelPosition"
             label-width="auto"
             :model="formLabelAlign">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="网站标题：">
            <el-input clearable v-model="webTitle"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="公司邮箱：">
            <el-input clearable v-model="companyEmail"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="网站关键词：">
            <el-input clearable v-model="webKeyword"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="微博地址：">
            <el-input clearable v-model="weiboUrl"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="网站描述：">
            <el-input clearable v-model="webDescribes"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="QQ号码：">
            <el-input clearable v-model="qqNumber"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="公司名称：">
            <el-input clearable v-model="companyName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="公司地址：">
            <el-input clearable v-model="companyAddress"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="公司电话：">
            <el-input clearable v-model="companyTel"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="底部版权：">
            <el-input clearable v-model="copyrightInfo"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="LOGO（电脑）：">
            <el-upload class="custom-upload" drag action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" multiple>
              <el-icon :size="20" class="el-icon--upload"><upload-filled /></el-icon>
              <div class="el-upload__text">
                点击<em>上传</em>，或将文件拖拽到此区域<br>
                <span style="color: gray;font-size: 10px;">
                  尺寸：138 x 44 PX；仅支持.jpg,.gif,.png<br>且小于300KB，建议PNG格式
                </span>
              </div>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="LOGO（手机）：">
            <el-upload class="custom-upload" drag action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" multiple>
              <el-icon :size="20" class="el-icon--upload"><upload-filled /></el-icon>
              <div class="el-upload__text">
                点击<em>上传</em>，或将文件拖拽到此区域<br>
                <span style="color: gray;font-size: 10px;">
                  尺寸：138 x 44 PX；仅支持.jpg,.gif,.png<br>且小于300KB，建议PNG格式
                </span>
              </div>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="地址栏图标：">
            <el-upload class="custom-upload" drag action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" multiple>
              <el-icon :size="20" class="el-icon--upload"><upload-filled /></el-icon>
              <div class="el-upload__text">
                点击<em>上传</em>，或将文件拖拽到此区域<br>
                <span style="color: gray;font-size: 10px;">
                  尺寸：138 x 44 PX；仅支持.jpg,.gif,.png<br>且小于300KB，建议PNG格式
                </span>
              </div>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="微信二维码：">
            <el-upload class="custom-upload" drag action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" multiple>
              <el-icon :size="20" class="el-icon--upload"><upload-filled /></el-icon>
              <div class="el-upload__text">
                点击<em>上传</em>，或将文件拖拽到此区域<br>
                <span style="color: gray;font-size: 10px;">
                  尺寸：138 x 44 PX；仅支持.jpg,.gif,.png<br>且小于300KB，建议PNG格式
                </span>
              </div>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="微博二维码：">
            <el-upload class="custom-upload" drag action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" multiple>
              <el-icon :size="20" class="el-icon--upload"><upload-filled /></el-icon>
              <div class="el-upload__text">
                点击<em>上传</em>，或将文件拖拽到此区域<br>
                <span style="color: gray;font-size: 10px;">
                  尺寸：138 x 44 PX；仅支持.jpg,.gif,.png<br>且小于300KB，建议PNG格式
                </span>
              </div>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="统计代码：">
            <el-input clearable v-model="copyrightInfo"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="网站当前状态：">
            <el-radio-group v-model="radio1" class="ml-4">
              <el-radio value="1" size="large">关闭</el-radio>
              <el-radio value="2" size="large">开启</el-radio>
            </el-radio-group>
            <div>
              <span style="color: orange">（维护期间可设置关闭网站）</span></div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="维护说明：">
            <el-input
                v-model="textarea"
                maxlength="30"
                style="width: 380px"
                placeholder="网站正在维护中..."
                show-word-limit
                type="textarea"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-card>
</template>

<script setup>

</script>

<style scoped>
::v-deep .custom-upload {
  width: 100%;
  height: 100%;
  /* 其他你需要的样式属性 */
}
</style>